<!DOCTYPE html>
<html>

<head>
  <title>Juicer</title>
  <meta charset=UTF-8>
  <script type="text/javascript" src="./javascripts/juicer.js"></script>
  <script type="text/javascript" src="./javascripts/jquery-easyui-1.4.4/jquery.min.js">
  </script>
</head>

<body>
  <!--   ${result} -->
  <div id="hi">

  </div>
  <!--下面是模板-->
  <script id="tpl" type="text/template">
    <ul>
      {@each list as it,index}
      <li>${it.name} (index:${index})</li>
      {@/each} {@each blah as it}
      <li>
        num:${it.num}<br/> {@if it.num==3} {@each it.inner as it2} ${it2.time}
        <br/> {@/each} {@/if}
      </li>
      {@/each}
    </ul>
  </script>
  <!--建立一个div来接收渲染结果-->
  <div id="result"></div>

  <!-- <script type="text/javascript">
    var data = {
      list: [{
          name: 'firstname',
          show: true
        },
        {
          name: 'secondname',
          show: false
        },
        {
          name: 'thirdname',
          show: true
        }
      ],
      blah: [{
          num: 1
        },
        {
          num: 2
        },
        {
          num: 3,
          inner: [{
              'time': '15s:00'
            },
            {
              'time': '16:00'
            },
            {
              'time': '17:00'
            },
            {
              'time': '18:00'
            }
          ]
        },
        {
          num: 4
        }
      ]
    };
    var tpl = document.getElementById("tpl").innerHTML;
    var html = juicer(tpl, data); //得到渲染结果，需要放到DOM元素中才能在页面中显示
    console.log(1);
    // console.log(html) //编译模板并立即渲染出结果，官方文档少了这一块，所以看不到结果
    // document.getElementById("hi").innerHTML = html;
    $.get('http://localhost:3004', function(result) {
      console.log(result);
      document.getElementById('hi').innerHTML = result;
    });
  </script> -->
</body>

</html>
